<template>
  <div id="container">

    <ul>
      <li>
        <div class="legend">
          <dv-decoration-9 :dur="12"
            style="font-size:18px; width:80px; height: 80px; font-weight: 600">100%</dv-decoration-9>
        </div>
        <div class="text">仓库分拣进度</div>
      </li>

      <li>
        <div class="legend">
          <dv-decoration-9 :dur="12"
            style="font-size:18px; width:80px; height: 80px; font-weight: 600">76%</dv-decoration-9>
        </div>
        <div class="text">物流运输进度</div>
      </li>

      <li>
        <div class="legend">
          <dv-decoration-9 :dur="12"
            style="font-size:18px; width:80px; height: 80px;font-weight: 600">100%</dv-decoration-9>
        </div>
        <div class="text">异常处理进度</div>
      </li>

    </ul>

    <div class="progressBar">

      <div class="progressCharts">
        <img src="../../assets/images/仓库_库存_o.png" alt="" class="warehouse" />
        <div class="mainBox">
          <div class="carBkg"></div>
          <div class="chart" ref="chart"></div>
        </div>
        <img src="../../assets/images/定位.png" alt="" class="destination" />
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import *as echarts from 'echarts'
import { onMounted, ref } from "vue";


let chart = ref<any>(null);
let max = ref<number>(1000);
let nowadays = ref<number>(760);
let percentum = ref<string>('');



let progressNum = function () {
  let num = nowadays.value / max.value;
  num = num * 100;
  percentum.value = num + '%';
}


let option = {
  grid: {
    left: '0', //grid 组件离容器左侧的距离。
    right: '0', //grid 组件离容器右侧的距离。
  },
  yAxis: { data: [] },
  xAxis: {
    min: 0.0, //坐标轴刻度最小值
    show: false, //是否显示 x 轴。
    type: 'value', //坐标轴类型。 value  category time log
    max: max.value, //最大值
  },
  series: [
    {
      type: 'bar', //type的值取决于你想用什么样的图例
      global: false, // 缺省为 false
      barWidth: '100%',
      data: [nowadays.value], //当前值
      showBackground: 'true',
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#FFF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#23B3DB', // 100% 处的颜色
              },
            ],
          },
        },
      },
    },
  ],
}

onMounted(() => {
  progressNum();
  const chartInstance = echarts.init(chart.value)
  chartInstance.clear();
  let height = chart.value.clientHeight;
  let width = chart.value.clientWidth;

  chartInstance.resize({
    width,
    height
  })

  chartInstance.setOption(option);

})

</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  ul {
    width: 100%;
    display: flex;
    height: 120px;
    justify-content: center;

    li {
      height: 100%;
      display: flex;
      width: 88px;
      margin: 0 15px;
      padding-top: 10px;
      flex-direction: column;

      .legend {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .text {
        flex: 1;
        width: 100%;
        display: flex;
        font-weight: 600;
        align-items: center;
        font-size: 14px;
        justify-content: center;
      }
    }
  }

  .progressBar {
    width: 100%;
  }

  .progressCharts {
    display: flex;
    justify-content: center;

    .mainBox {
      width: 60%;
      position: relative;

      .carBkg {
        width: 100%;
        margin: 0 auto;
        height: 35px;
        background-size: contain;
        background-repeat: no-repeat;
        transition: background-position 1.3s;
        background-position: v-bind(percentum);
        background-image: url('../../assets/images/火箭.png');
      }

      .chart {
        margin: 0;
        height: 10px;
        width: 100%;
        box-sizing: border-box;


      }
    }

    .warehouse {
      width: 40px;
      height: 40px;
    }

    .destination {
      width: 20px;
      height: 36px;
    }
  }
}
</style>